<template>
  <div class="search-container">
    <div class="header">
      <HeaderTop>
        <router-link to="/" class="header_left" slot="left">
          <i class="iconfont icon-arrow-left"></i>
        </router-link>
        <form class="search_form" @submit.prevent="search" slot="search">
          <div class="searchBox">
            <div class="inner">
              <span class="iconfont icon-chakan"></span>
              <input type="text" placeholder="请输入要搜索的商品" v-model="keyword">
            </div>
          </div>
          <button class="header_right clickSearch" slot="right">
            <span>搜索</span>
          </button>
        </form>
      </HeaderTop>
    </div>
    <div class="main">
      <ul class="cartList" v-if="goodsResult.length">
        <router-link :to="{ name: 'goodsinfo', params: { id: item.id }}"
                     class="cart-item"
                     tag="li"
                     v-for="(item, index) in goodsResult" :key="item.id">
          <div class="cart_img" v-if="item.pics">
            <img v-lazy="item.pics[0]" alt="">
          </div>
          <div class="cart_detail">
            <span class="cart_title">{{ item.title }}</span>
            <div class="cart_price">
              ￥&nbsp;<span class="big_price">{{ item.price }}</span>.00
            </div>
            <div class="shop_cart_icon" @click.stop="toShopCart"></div>
          </div>
        </router-link>
      </ul>
      <div class="search_none" v-else="goodsResult.length">
        很抱歉!无搜索结果
      </div>
    </div>
  </div>
</template>

<script>
  import { mapState } from 'vuex'
  import HeaderTop from '../../components/HeaderTop/HeaderTop'
  import GoodsList from '../../components/GoodsList/GoodsList'
  export default {
    data () {
      return {
        keyword: '', // 搜索的关键字
        goodsResult: [], // 搜索的商品结果
      }
    },
    mounted () {
      this.$store.dispatch('getGoods')
    },
    computed: {
      ...mapState(['goods'])
    },
    components: {
      HeaderTop,
      GoodsList
    },
    methods: {
      search () {
        // 得到搜索关键字
        const keyword = this.keyword.trim()
        // 进行搜索
        if (keyword) {
          let { goods } = this
          this.goodsResult = goods.filter(item => {
            return item.title.indexOf(keyword) !== -1
          })
          // console.log(this.goodsResult)
        } else {
          this.goodsResult = ''
        }
      },
      toShopCart (e) {
        this.$router.replace('/shopcart')
      }
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  @import "../../assets/stylus/mixins.styl";
  .search-container
    width 100%
    position relative
    top 0
    right 0
    bottom 0
    left 0
    .header
      size(100%, 44px)
      bg(#ffffff)
      position fixed
      left 0
      top 0
      z-index 999
      .header_left, .header_right
        color(#666)
        size(44px, 44px)
        lh(44px)
        center-text()
        position absolute
        top 50%
        transform translateY(-50%)
      .header_left
        left 0
        .iconfont
          fz(25px !important)
        .icon-arrow-left
          color(#252525)
      .searchBox
        size(100%, 44px)
        border-box()
        padding 0 60px 0 50px
        overflow hidden
        .inner
          position relative
          size(100%, 30px)
          margin-top 7px
          bg(#f7f7f7)
          border-radius 15px
          .icon-chakan
            color(#ccc)
            fz(15px)
            position absolute
            top 50%
            left 15px
            transform translateY(-50%)
          input
            bg(#f7f7f7)
            size(80%, 100%)
            color(#232326)
            fz(12px)
            border 0
            position absolute
            left 46px
            right 0
            border-radius 0 15px 15px 0
            &::-webkit-input-placeholder
              fz(12px)
      button
        margin-right 16px
        bg(#fff)
        border none
        span
          size(40px, 28px)
          bg(#e93b3d)
          fz(14px)
          lh(28px)
          center-text()
          color(#fff)
          display block
          border-radius 4px
    .main
      width 100%
      margin-top 50px
      .cartList
        width: 100%
        .cart-item
          border-box()
          height 135px
          display flex
          padding 5px 0 5px 10px
          position relative
          .cart_img
            width 120px
            img
              size(120px, 120px)
          .cart_detail
            border-box()
            display flex
            flex-direction column
            padding 0 10px
            bottom-border-1px(#eee)
            .cart_title
              color(#232326)
              border-box()
              fz(16px)
              lh(18px)
              display block
              overflow hidden
              text-overflow ellipsis
              display -webkit-box
              -webkit-line-clamp 2
              -webkit-box-orient vertical
              padding 0 20px 0 4px
              margin-top 8px
            .cart_price
              fz(12px)
              color(#f23030)
              border-box()
              padding 6px 0 16px
              margin-top 6px
              .big_price
                fz(17px)
            .shop_cart_icon
              size(25px, 25px)
              position absolute
              right 10px
              bottom 10px
              &::before
                content ''
                position absolute
                size(25px, 25px)
                right 5px
                bottom 5px
                bgi('./shopcart-icon.png')
                bgs(15px, auto)
      .search_none
        margin 0 auto
        color(#333)
        bg(#fff)
        center-text()
        lh(26px)
        margin-top 0.125rem
</style>

